import * as React from "react";
import { Context } from "../index";

const App = () => {
  const value = React.useContext(Context);
  const appValue = React.useContext(AppContext);
  return (
    <h1>
      value: {value.context2} appValue: {appValue.context}
    </h1>
  );
};

const AppContext = React.createContext(3123123123);
const A = () => {
  const [count, setCount] = React.useState(0);
  const [count2, setCount2] = React.useState(0);
  return (
    <div>
      <AppContext.Provider value={{ context: count }}>
        <Context.Provider value={{context2: count2}}>
          <App />
          <h1 onClick={() => setCount(count + 1)}>context+1</h1>
          <h1 onClick={() => setCount2(count2 + 1)}>context2+1</h1>
        </Context.Provider>
      </AppContext.Provider>
    </div>
  );
};

export default A;
